<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作台 - OA办公系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
    <div class="container mx-auto fade-in">
        <!-- 欢迎信息 -->
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">您好，张经理</h1>
                <p class="text-gray-600">今天是 <span id="currentDate"></span>，祝您工作愉快！</p>
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-500">上次登录: 2023-06-15 08:30:45</p>
                <p class="text-sm text-gray-500">IP: 192.168.1.101</p>
            </div>
        </div>

        <!-- 数据概览 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
            <div class="bg-white rounded-lg shadow p-5 card-hover">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-500 text-sm">待办事项</p>
                        <h2 class="text-3xl font-bold text-gray-800">12</h2>
                    </div>
                    <div class="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-clipboard-list text-blue-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-500 h-2 rounded-full" style="width: 60%"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">已完成 18/30 (60%)</p>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-5 card-hover">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-500 text-sm">待审批</p>
                        <h2 class="text-3xl font-bold text-gray-800">8</h2>
                    </div>
                    <div class="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-file-signature text-green-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-green-500 h-2 rounded-full" style="width: 40%"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">已处理 8/20 (40%)</p>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-5 card-hover">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-500 text-sm">今日会议</p>
                        <h2 class="text-3xl font-bold text-gray-800">3</h2>
                    </div>
                    <div class="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-users text-purple-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>09:30 市场部周会</span>
                        <span class="text-purple-500">30分钟后</span>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-5 card-hover">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-500 text-sm">未读消息</p>
                        <h2 class="text-3xl font-bold text-gray-800">5</h2>
                    </div>
                    <div class="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-envelope text-red-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>最新消息</span>
                        <span class="text-red-500">10分钟前</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 待办事项和通知 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <!-- 待办事项 -->
            <div class="bg-white rounded-lg shadow">
                <div class="border-b px-5 py-3 flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-800">待办事项</h3>
                    <a href="#" class="text-blue-500 text-sm hover:underline">查看全部</a>
                </div>
                <div class="p-5">
                    <ul class="space-y-3">
                        <li class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
                            <div class="h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-file-alt text-blue-500"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-sm font-medium text-gray-800">Q2季度市场报告审核</h4>
                                <p class="text-xs text-gray-500">截止日期: 2023-06-20</p>
                            </div>
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">紧急</span>
                        </li>
                        <li class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
                            <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-tasks text-green-500"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-sm font-medium text-gray-800">新产品发布会准备工作</h4>
                                <p class="text-xs text-gray-500">截止日期: 2023-06-25</p>
                            </div>
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">进行中</span>
                        </li>
                        <li class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
                            <div class="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-users text-purple-500"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-sm font-medium text-gray-800">团队建设活动策划</h4>
                                <p class="text-xs text-gray-500">截止日期: 2023-06-30</p>
                            </div>
                            <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">计划中</span>
                        </li>
                        <li class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
                            <div class="h-8 w-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-chart-line text-red-500"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-sm font-medium text-gray-800">销售数据分析报告</h4>
                                <p class="text-xs text-gray-500">截止日期: 2023-06-18</p>
                            </div>
                            <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">已逾期</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 通知公告 -->
            <div class="bg-white rounded-lg shadow">
                <div class="border-b px-5 py-3 flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-800">通知公告</h3>
                    <a href="#" class="text-blue-500 text-sm hover:underline">查看全部</a>
                </div>
                <div class="p-5">
                    <ul class="space-y-4">
                        <li class="border-l-4 border-blue-500 pl-3 py-1">
                            <h4 class="text-sm font-medium text-gray-800">公司6月份例会安排通知</h4>
                            <p class="text-xs text-gray-500 mt-1">各部门请于6月20日前提交月度工作总结，并准备例会汇报材料。</p>
                            <div class="flex justify-between items-center mt-2">
                                <span class="text-xs text-gray-400">行政部 - 李秘书</span>
                                <span class="text-xs text-gray-400">2023-06-15</span>
                            </div>
                        </li>
                        <li class="border-l-4 border-green-500 pl-3 py-1">
                            <h4 class="text-sm font-medium text-gray-800">新版OA系统上线通知</h4>
                            <p class="text-xs text-gray-500 mt-1">新版OA系统将于6月25日正式上线，请各位同事提前熟悉系统操作。</p>
                            <div class="flex justify-between items-center mt-2">
                                <span class="text-xs text-gray-400">IT部 - 王工程师</span>
                                <span class="text-xs text-gray-400">2023-06-14</span>
                            </div>
                        </li>
                        <li class="border-l-4 border-yellow-500 pl-3 py-1">
                            <h4 class="text-sm font-medium text-gray-800">端午节放假安排</h4>
                            <p class="text-xs text-gray-500 mt-1">根据国家法定假日规定，公司定于6月22日至24日放假，6月25日正常上班。</p>
                            <div class="flex justify-between items-center mt-2">
                                <span class="text-xs text-gray-400">人事部 - 张经理</span>
                                <span class="text-xs text-gray-400">2023-06-10</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 快捷入口和日程 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 快捷入口 -->
            <div class="bg-white rounded-lg shadow col-span-1">
                <div class="border-b px-5 py-3">
                    <h3 class="text-lg font-semibold text-gray-800">快捷入口</h3>
                </div>
                <div class="p-5">
                    <div class="grid grid-cols-3 gap-4">
                        <a href="#" class="flex flex-col items-center justify-center p-3 hover:bg-blue-50 rounded-lg btn-hover-effect">
                            <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center mb-2">
                                <i class="fas fa-calendar-plus text-blue-500"></i>
                            </div>
                            <span class="text-xs text-gray-700">请假申请</span>
                        </a>
                        <a href="#" class="flex flex-col items-center justify-center p-3 hover:bg-blue-50 rounded-lg btn-hover-effect">
                            <div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center mb-2">
                                <i class="fas fa-money-check-alt text-green-500"></i>
                            </div>
                            <span class="text-xs text-gray-700">报销申请</span>
                        </a>
                        <a href="#" class="flex flex-col items-center justify-center p-3 hover:bg-blue-50 rounded-lg btn-hover-effect">
                            <div class="h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center mb-2">
                                <i class="fas fa-plane-departure text-purple-500"></i>
                            </div>
                            <span class="text-xs text-gray-700">出差申请</span>
                        </a>
                        <a href="#" class="flex flex-col items-center justify-center p-3 hover:bg-blue-50 rounded-lg btn-hover-effect">
                            <div class="h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
                                <i class="fas fa-file-invoice text-yellow-500"></i>
                            </div>
                            <span class="text-xs text-gray-700">采购申请</span>
                        </a>
                        <a href="#" class="flex flex-col items-center justify-center p-3 hover:bg-blue-50 rounded-lg btn-hover-effect">
                            <div class="h-10 w-10 bg-red-100 rounded-full flex items-center justify-center mb-2">
                                <i class="fas fa-car text-red-500"></i>
                            </div>
                            <span class="text-xs text-gray-700">用车申请</span>
                        </a>
                        <a href="#" class="flex flex-col items-center justify-center p-3 hover:bg-blue-50 rounded-lg btn-hover-effect">
                            <div class="h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center mb-2">
                                <i class="fas fa-building text-indigo-500"></i>
                            </div>
                            <span class="text-xs text-gray-700">会议室预订</span>
                        </a>
                        <a href="#" class="flex flex-col items-center justify-center p-3 hover:bg-blue-50 rounded-lg btn-hover-effect">
                            <div class="h-10 w-10 bg-pink-100 rounded-full flex items-center justify-center mb-2">
                                <i class="fas fa-stamp text-pink-500"></i>
                            </div>
                            <span class="text-xs text-gray-700">用印申请</span>
                        </a>
                        <a href="#" class="flex flex-col items-center justify-center p-3 hover:bg-blue-50 rounded-lg btn-hover-effect">
                            <div class="h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center mb-2">
                                <i class="fas fa-ellipsis-h text-gray-500"></i>
                            </div>
                            <span class="text-xs text-gray-700">更多应用</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 日程安排 -->
            <div class="bg-white rounded-lg shadow col-span-2">
                <div class="border-b px-5 py-3 flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-800">今日日程</h3>
                    <a href="#" class="text-blue-500 text-sm hover:underline">查看全部</a>
                </div>
                <div class="p-5">
                    <ul class="space-y-3">
                        <li class="flex items-center p-2 hover:bg-gray-50 rounded-lg calendar-event event-important">
                            <div class="w-16 text-center mr-4">
                                <p class="text-sm font-medium text-gray-800">09:30</p>
                                <p class="text-xs text-gray-500">10:30</p>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-sm font-medium text-gray-800">市场部周例会</h4>
                                <p class="text-xs text-gray-500">地点: 3楼会议室A</p>
                            </div>
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">即将开始</span>
                        </li>
                        <li class="flex items-center p-2 hover:bg-gray-50 rounded-lg calendar-event event-normal">
                            <div class="w-16 text-center mr-4">
                                <p class="text-sm font-medium text-gray-800">13:30</p>
                                <p class="text-xs text-gray-500">14:30</p>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-sm font-medium text-gray-800">新产品方案讨论</h4>
                                <p class="text-xs text-gray-500">地点: 4楼会议室B</p>
                            </div>
                            <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">未开始</span>
                        </li>
                        <li class="flex items-center p-2 hover:bg-gray-50 rounded-lg calendar-event event-low">
                            <div class="w-16 text-center mr-4">
                                <p class="text-sm font-medium text-gray-800">16:00</p>
                                <p class="text-xs text-gray-500">17:00</p>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-sm font-medium text-gray-800">与客户电话会议</h4>
                                <p class="text-xs text-gray-500">地点: 个人办公室</p>
                            </div>
                            <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">未开始</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 显示当前日期
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
        });
    </script>
</body>
</html>